<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>博客信息</title>
    <link rel="stylesheet" type="text/css" href="../res/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../res/css/main.css">
    <!--加载meta IE兼容文件-->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    .userLabel{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-left: 30px
    }
</style>
<body>
<div class="header" style="margin-bottom: 40px">
    <div class="menu-btn">
        <div class="menu"></div>
    </div>
    <h1 class="logo">
        <a href="index.html">
            <span>MYBLOG</span>
            <img src="../res/img/logo.png" style="width: 120px;height: 80px">
        </a>
    </h1>
    <div class="nav">
        <a href="/toIndex.action" >文章</a>
        <a href="/toMyBlog.action">我的博客</a>
        <a href="/toWrite.action">写博客</a>
        <a href="/toAlbum.action">相册</a>
        <a href="/toAbout.action">个人空间</a>
        <div class="layui-input-inline">
            <input autocomplete="off" form="searchForm" type="text" name="searchKey" placeholder="  搜索博客"  style="border-radius: 4px
            ;padding: 3px 0px;font-family: Microsoft YaHei UI;border-style: solid;border-color: forestgreen;">
            <i class="layui-icon layui-icon-search" style="position: absolute;top:1px;right: 8px;"></i>
        </div>
        <button class="layui-btn" onclick="search()" style="display:inline-block" ><i class="layui-icon">&#xe615;</i>搜索</button>
        <label th:if="${session.loginUser != null}">
            <img class="userLabel" th:if="${session.loginUser.sex == 'female'}"src="../res/img/label/girl.png" >
            <img class="userLabel" th:if="${session.loginUser.sex == 'male'}"src="../res/img/label/boy.png" >
            <a href="/toAbout.action" style="color: forestgreen;margin-left: 5px;" th:text="'欢迎您,'+${session.loginUser.name}"></a>
        </label>
    </div>
    <form id="searchForm" action="/searchEssayByTitle.action"></form>
    <div th:if="${session.loginUser == null}">
        <p  class="welcome-text">
            <a href="toLogin" class="layui-btn">登录</a>
        </p>
    </div>
    <div th:if="${session.loginUser != null}">
        <p  class="welcome-text">
            <a href="toLogout" class="layui-btn">注销</a>
        </p>
    </div>
    <ul class="layui-nav header-down-nav">
        <li class="layui-nav-item"><a href="/toIndex.action" >所有文章</a></li>
        <li class="layui-nav-item"><a href="/toMyBlog.action">我的博客</a></li>
        <li class="layui-nav-item"><a href="/toWrite.action">写博客</a></li>
        <li class="layui-nav-item"><a href="/toAlbum.action">相册</a></li>
        <li class="layui-nav-item"><a href="/toAbout.action">个人空间</a></li>
        <li class="layui-nav-item" th:if="${session.loginUser == null}"><a href="toLogin">登录</a></li>
        <li class="layui-nav-item" th:if="${session.loginUser != null}"><a href="toLogout">注销</a></li>
    </ul>
</div>


<div class="content whisper-content">
    <div class="cont">
        <div class="whisper-list" id="abc">
            <div th:if="session.essayBySearch != null" th:each="essay:${session.essayBySearch}" class="item-box">
                <div class="item">
                    <div class="whisper-title">
                        <i class="layui-icon layui-icon-date"></i>
                        <span class="data"></span><span th:text="${essay.publishTime}"></span>
                        <span th:text="${essay.title}" style="font-size: 20px;margin-left: 50px;"></span>
                            <!--<i class="layui-icon layui-icon-date"></i><span class="hour">12:25</span><span class="date">2018/06/08</span>-->
                    </div>
                    <div class="layui-form-item">
                        <i class="layui-icon">&#xe60a;</i>
                        <p class="text-cont" th:text="${essay.content}"></p>
                    </div>
                    <div class="img-box">
                        <img th:src="@{${essay.imgUrl}}" width="300px" height="200px">
                    </div>
                    <div class="op-list">
                        <p class="like"><i class="layui-icon layui-icon-praise"></i><span>1200</span></p>
                        <p class="edit"><i class="layui-icon layui-icon-reply-fill"></i><span>1200</span></p>
                        <p class="off"><span>展开</span><i class="layui-icon layui-icon-down"></i></p>
                    </div>
                </div>
                <div class="review-version layui-hide">
                    <div class="form">
                        <img src="../res/img/header2.png">
                        <form class="layui-form" action="addComment.action" id="commentForm" method="post">
                            <!--隐藏表单提交相关数据-->
                            <input type="hidden" name="essayId" th:value="${essay.id}">
                            <input th:if="${session.loginUser} != null" type="hidden" name="userId" th:value="${session.loginUser.id}">
                            <div class="layui-form-item layui-form-text">
                                <div class="layui-input-block">
                                    <textarea name="comment" class="layui-textarea" id="content" placeholder="来评论一下吧!"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="text-align: right;">
                                    <!--<input class="layui-btn definite">確定</input>-->
                                    <button lay-submit="" lay-filter="formDemo" class="layui-btn ">確定</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="list-cont" th:each="comment:${session.commentList}">
                        <div class="cont" th:if="${comment.essayId}==${essay.id}">
                            <div class="img">
                                <img src="../res/img/header.png" alt="">
                            </div>
                            <div class="text">
                                <p class="tit"><span class="name" th:text="${comment.username}"></span><span class="data" th:text="${comment.publishTime}"></span></p>
                                <p class="ct" th:text="${comment.content}"></p>
                                <!--<form class="layui-form" method="post">
                                    <input type="hidden" th:value="${comment.id}" name="commentId">
                                    <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="formDelete" style="float: right"><i class="layui-icon">&#xe640;</i></button>
                                </form>-->
                                <!--<button class="layui-btn layui-btn-sm" style="float: right"><i class="layui-icon">&#xe640;</i></button>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div th:if="${session.essayBySearchNumber != null&&session.essayBySearch == null}"  class="item-box">
                <div class="item" >
                    <div class="whisper-title">
                        <i class="layui-icon layui-icon-date"></i>
                        <span class="data"></span><span th:text="${session.essayBySearchNumber.publishTime}"></span>
                        <span th:text="${session.essayBySearchNumber.title}" style="font-size: 25px;margin-left: 150px;"></span>
                        <!--<i class="layui-icon layui-icon-date"></i><span class="hour">12:25</span><span class="date">2018/06/08</span>-->
                    </div>
                    <div class="layui-form-item">
                        <i class="layui-icon">&#xe60a;</i>
                        <pre class="text-cont" th:text="${session.essayBySearchNumber.content}"></pre>
                    </div>
                    <div class="img-box">
                        <img th:src="@{${session.essayBySearchNumber.imgUrl}}" width="300px" height="200px">
                    </div>
                    <div class="op-list">
                        <p class="like"><i class="layui-icon layui-icon-praise"></i><span>1200</span></p>
                        <p class="edit"><i class="layui-icon layui-icon-reply-fill"></i><span>1200</span></p>
                        <p class="off"><span>展开</span><i class="layui-icon layui-icon-down"></i></p>
                    </div>
                </div>
                <div class="review-version layui-hide">
                    <div class="form">
                        <img src="../res/img/header2.png">
                        <form class="layui-form" action="addComment.action" id="commentForm" method="post">
                            <!--隐藏表单提交相关数据-->
                            <input type="hidden" name="essayId" th:value="${session.essayBySearchNumber.id}">
                            <input th:if="${session.loginUser} != null" type="hidden" name="userId" th:value="${session.loginUser.id}">
                            <input type="hidden" name="comment" id="input">
                            <div class="layui-form-item layui-form-text">
                                <div class="layui-input-block">
                                    <textarea name="desc" class="layui-textarea" id="content" placeholder="来评论一下吧!"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block" style="text-align: right;">
                                    <!--<input class="layui-btn definite">確定</input>-->
                                    <button lay-submit="" lay-filter="formDemo" class="layui-btn " onclick="aa()">確定</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="list-cont" th:each="comment:${session.commentList}">
                        <div class="cont">
                            <div class="img">
                                <img src="../res/img/header.png" alt="">
                            </div>
                            <div class="text">
                                <p class="tit"><span class="name" th:text="${comment.username}"></span><span class="data" th:text="${comment.publishTime}"></span></p>
                                <p class="ct" th:text="${comment.content}"></p>
                                <!--<form class="layui-form" method="post">
                                    <input type="hidden" th:value="${comment.id}" name="commentId">
                                    <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="formDelete" style="float: right"><i class="layui-icon">&#xe640;</i></button>
                                </form>-->
                                <!--<button class="layui-btn layui-btn-sm" style="float: right"><i class="layui-icon">&#xe640;</i></button>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="laytplCont">

</script>
<div class="footer-wrap">
    <div class="footer w1000">
        <div class="qrcode">
            <img src="../res/img/erweima.jpg">
        </div>
        <div class="practice-mode">
            <img src="../res/img/down_img.jpg">
            <div class="text">
                <h4 class="title">我的联系方式</h4>
                <p>微信<span class="WeChat">15521306790</span></p>
                <p>手机<span class="iphone">15521306790</span></p>
                <p>邮箱<span class="email">1115051923@qq.com</span></p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../res/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '../res/js/util/'
    }).use(['element','laypage','form','menu'],function(){
        element = layui.element,laypage = layui.laypage,menu = layui.menu;
        laypage.render({
            elem: 'demo'
            ,count: 70 //数据总数，从服务端得到
        });
        $=layui.jquery;
        var form = layui.form;
        form.on('submit(formDemo)', function(data){
            $.ajax({
                url:'/addComment.action',
                method:'post',
                data:data.field,
                dataType:'JSON',
                success:function(res){
                    var layer = layui.layer;
                    layer.msg(res.msg, {
                        time: 1000, //1s后自动关闭
                        icon: 1
                    });
                },
                error:function (data) {

                }
            });
            return false;
        });

        form.on('submit(formDelete)', function(data){
            $.ajax({
                url:'/deleteComment.action',
                method:'post',
                data:data.field,
                dataType:'JSON',
                success:function(res){
                    var layer = layui.layer;
                    layer.msg(res.msg, {
                        time: 2000, //1s后自动关闭
                        icon: 1
                    });
                },
                error:function (data) {

                }
            });
            return false;
        });
        menu.init();
        menu.off();
        menu.submit()
    })
</script>

<script>
    function search() {
        document.getElementById("searchForm").submit();//js原生方式表单提交
    }
</script>
</body>
</html>